<!-- 修改密码 -->
<template>
    <page-header-wrapper @back="() => $router.go(-1)" class="detail">
        <a-card :bordered="false" title="密码设置">
            <a-form-model :model="settings" ref="ruleForm" style="width: 700px" :rules="rules" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
                <a-form-model-item label="手机号">
                    <a-input v-model="settings.phone" :disabled="true" placeholder="请输入手机号" />
                </a-form-model-item>
                <a-form-model-item label="手机验证码" prop="verifyCode">
                    <a-row :gutter="16">
                        <a-col class="gutter-row" :span="16">
                            <a-input v-model="settings.verifyCode" placeholder="请输入验证码" />
                        </a-col>
                        <a-col class="gutter-row" :span="8">
                            <a-button class="getCaptcha" :disabled="smsSendBtn" @click.stop.prevent="getCaptcha" v-text="!smsSendBtn && $t('获取验证码')||(time+' s')"></a-button>
                        </a-col>
                    </a-row>
                </a-form-model-item>
                <a-form-model-item label="新密码" prop="password">
                    <a-input-password v-model="settings.password" placeholder="请输入新密码" />
                </a-form-model-item>
                <a-form-model-item label="确认密码" prop="confirmPassword">
                    <a-input-password v-model="settings.confirmPassword" placeholder="请再次输入密码" />
                </a-form-model-item>
                <a-form-model-item v-bind="formItemLayoutWithOutLabel">
                    <a-button type="primary" @click="update">保存</a-button>
                </a-form-model-item>
            </a-form-model>
        </a-card>
    </page-header-wrapper>
</template>

<script>
import storage from 'store'
import { updateUserPassword } from '@/api/system';
import { getSmsCaptcha } from '@/api/login';
export default {
    data () {
        return {
            formItemLayoutWithOutLabel: {
                wrapperCol: {
                    xs: { span: 24, offset: 0 },
                    sm: { span: 24, offset: 16 },
                },
            },
            settings: {
                'phone': '', // 原手机号
                'verifyCode': '', // 原手机号验证码
                'password': '', // 新手机号
                'confirmPassword': '', // 新手机号验证码
            },
            rules: {
                verifyCode: [{ required: true, message: '请输入手机验证码', trigger: 'blur' }],
                password: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 8, max: 16, message: '密码只能为8 ~ 16位数字字母组合',trigger: 'blur'}
                ],
                confirmPassword: [{ required: true, message: '请再次输入密码', trigger: 'blur' },{ validator: this.handlePasswordCheck }],
            },
            smsSendBtn: false,
            time: 60,
        };
    },
    created(){
        this.settings.phone = sessionStorage.getItem('userPhone');
    },
    methods: {
        // 确认密码校验
        handlePasswordCheck (rule, value, callback) {
            if (value === undefined) {
                callback(new Error('请再次输入密码'))
            }
            if (value && this.settings.password !== this.settings.confirmPassword) {
                callback(new Error('两次密码输入不一致'))
            }
            callback()
        },
        // 获取验证码
        getCaptcha (e) {
            e.preventDefault()
            let _this = this
            _this.smsSendBtn = true
            const interval = window.setInterval(() => {
                if (_this.time-- <= 0) {
                    _this.time = 60
                    _this.smsSendBtn = false
                    window.clearInterval(interval)
                }
            }, 1000)
            const hide = _this.$message.loading('验证码发送中..', 0)
            getSmsCaptcha({ 'phone': _this.settings.phone , 'businessType': 'UPDATE_PASSWORD' }).then(res => {
                setTimeout(hide, 2500)
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: `验证码已发送至尾号${_this.settings.phone.substring(7)}上，请注意查收`,
                        duration: 8
                    })
                }else{
                    setTimeout(hide, 1)
                    clearInterval(interval)
                    _this.time = 60
                    _this.smsSendBtn = false
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            }).catch(err => {
                setTimeout(hide, 1)
                clearInterval(interval)
                _this.time = 60
                _this.smsSendBtn = false
                
            })
        },
        // 确认修改密码
        update(){
            let _this = this;
            _this.$refs.ruleForm.validate(valid => {
                if(valid){
                    updateUserPassword(_this.settings)
                    .then(res=>{
                        if(res.success){
                            _this.$notification['success']({
                                message: '温馨提示',
                                description: '修改成功',
                                duration: 8
                            })
                            sessionStorage.clear()
                            _this.$store.dispatch('Logout').then(() => {
                                this.$router.push({ name: 'login' })
                                location.reload()
                            })
                        }else{
                            _this.$notification['error']({
                                message: '温馨提示',
                                description: res.errMessage,
                                duration: 8
                            })
                        }
                    })
                }
            })
        },
    }
}

</script>
<style scoped>

</style>